<template>
	<view>
		<view class="search">
			<u--input v-model="query.searchValue" placeholder="请输入名称/部门" :clearable="true" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" @clear="getList()">
				<template slot="suffix">
					<view class="search_btn" @click="getList()"> 搜索</view>
				</template></u--input>
		</view>
		<view class="box " v-for=" (v,i) in datas" :key="i">
			<div class="box_herder flex">
				<div class="box_herder_left">{{v.planNo}}</div>
				<div class="box_herder_right" @click="jumpTo('/pages/emergencyPlan/details',{
					id:v.planId
				})">
					详情
				</div>
			</div>
			<div class="box_item">
				<div class="box_label">预案类别：</div>
				<div class="box_value">{{v.planTypeStr}}</div>
			</div>
			<div class="box_item">
				<div class="box_label">预案部门：</div>
				<div class="box_value">{{v.deptName}}</div>
			</div>
			<div class="box_item">
				<div class="box_label">预案名称：</div>
				<div class="box_value">{{v.planName}}</div>
			</div>
		</view>
		<u-empty mode="list" v-if="datas.length<=0" marginTop="80">
		</u-empty>
	</view>
</template>

<script>
	import {
		securityEmergencePlanList
	} from '@/api/emergencyPlan.js'
	export default {
		data() {
			return {
				query: {
					searchValue: '',
					PAGE_SIZE: 100000,
					PAGE_NO: 1
				},
				datas: [
				]
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			
			getList() {
				securityEmergencePlanList(this.query).then(res => {
					console.log(res, "res");
					this.datas = res.rows
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search {

		/deep/.u-input {
			width: 688rpx;
			height: 65rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			margin: 0 auto;
			margin-top: 15rpx;
			border-radius: 32rpx;
		}

		&_btn {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #666666;
			padding-left: 10rpx;
			border-left: 1rpx solid #E0E0E0;
		}
	}

	.box {
		width: 730rpx;
		margin: 20rpx auto;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 30rpx;

		&_herder {
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #e0e0e0;
			justify-content: space-between;
			align-items: center;

			&_right {
				padding: 20rpx 40rpx;
				background-color: #257eff;
				color: #FFF;

				border-radius: 30rpx;

			}
		}

		&_item {
			display: flex;
			margin-top: 35rpx;

		}

		&_label {
			flex: 0 0 auto;
			color: #999999;
		}
	}
</style>